<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="top-box">
					<view class="table-info flexWrapNo">
						<view class="big">{{numText}}</view>
						<view class="info">
							<view class="table-name flexWrapNo">
								{{characters}}
								<view class="residue flexWrapNo" v-if="orderInfo.order_status==10">
									<view class="order-status">
										使用中
									</view>
									<liu-countdown ref="countdown3" :showHours="false" auto mode="2"  :showDays="false" :endDate="orderInfo.service_end_time"></liu-countdown>
								</view>
								<view class="order-status" style="margin-left: 12upx;" v-else :class="{'end':orderInfo.order_status==20||orderInfo.order_status==30,'noStarted':item.order_status==0}">
									<block v-if="orderInfo.order_status==0">待使用</block>
									<block v-if="orderInfo.order_status==20">已结束</block>
									<block v-if="orderInfo.order_status==30">已取消</block>
									<block v-if="orderInfo.order_status==40">已超时</block>
								</view>
							</view>
							<view class="store-name flexWrapNo">
								<image src="../static/home/navigation-icon.png" class="navigation-icon"></image>
								{{orderInfo.shop_name}}
							</view>
						</view>
					</view>
					<view class="order-info">
						<view class="order-type">
							<block v-if="orderInfo.order_type=='immediately'">立刻开台</block>
							<block v-if="orderInfo.order_type=='make_appointment'">预约开台</block>
							<block v-if="orderInfo.order_type=='other_packages'">其他套餐</block>
							<block v-if="orderInfo.order_type=='about_ball'">同城约球</block>
							<block v-if="orderInfo.quantity&&orderInfo.quantity!=0">{{orderInfo.quantity}}小时</block>
							<block v-else>{{orderInfo.minute||0}}分钟</block>
						</view>
						<view class="order-item">
							{{orderInfo.service_date||'加载中...'}} {{orderInfo.start_time||'加载中...'}}～<text
								v-if="orderInfo.is_ci==1">次日</text>{{orderInfo.end_time||'加载中...'}}
						</view>
					</view>
					<view class="btn-box flexWrapNo" v-if="orderInfo.order_status!=20">
						<view class="btn" @tap="showTips()"
							v-if="orderInfo.order_status!=20&&orderInfo.order_status!=30">
							{{orderInfo.order_status==0?"取消订单":"结束订单"}}</view>
						<view class="btn"
							@tap="goPage('/moduleA/score?order_no='+order_no+'&scoreNum='+orderInfo.red_score+'&scoreNum2='+orderInfo.blue_score)"
							v-if="orderInfo.order_status!=0&&orderInfo.order_status!=30&&orderInfo.type!=2">计分牌</view>
						<view class="btn" @tap="goRenew()"
							v-if="orderInfo.type==2&&orderInfo.isShow==1&&orderInfo.order_status!=0">
							续费</view>
						<view class="btn green" @tap="showOpen(0)"
							v-if="orderInfo.order_status!=20&&orderInfo.order_status!=30&&orderInfo.order_status!=20">
							开始/开灯</view>

					</view>
					<view class="score" v-if="orderInfo.order_status!=0&&orderInfo.order_status!=30&&orderInfo.type!=2">
						比分{{orderInfo.red_score||'0'}}:{{orderInfo.blue_score||'0'}}</view>
				</view>
				<view class="status-box" v-if="orderInfo.order_status!=0&&orderInfo.order_status!=30&&orderInfo.order_status!=20">
					<view class="status-top">
						<view class="status-title">选一个打球/打牌状态吧</view>
						<view class="tips">店铺首页{{orderInfo.store_equipment_name}}可见</view>
					</view>
					<view class="status-cont flexWrapNo">
						<view class="status-item flexWarpCenterColumn" v-for="(item,index) in playStatusList"
							@tap="changeStatus(index)">
							<view class="status-icon" :class="{active:currmentIndex==index}">
								<image :src="item.img" mode="aspectFit"></image>
							</view>
							<text>{{item.status_txt}}</text>
						</view>
					</view>
				</view>
				<view class="order-box">
					<view class="order-item">
						<text class="item-title">下单时间:</text> {{orderInfo.createtime}}
					</view>
					<view class="order-item">
						<text class="item-title">订单编号:</text> {{orderInfo.order_no}}
					</view>
					<view class="order-item">
						<text class="item-title">订单金额:</text> ¥{{orderInfo.total_pay_money}}
					</view>
					<view class="order-item">
						<text class="item-title">团购券:</text> 无
					</view>
					<view class="order-item" v-if="orderInfo.payment_method==6"><text
							class="item-title">通卡优惠:</text>-¥{{orderInfo.discount_price||'0.00'}}</view>
					<view class="order-item" v-else><text
							class="item-title">优惠卡券:</text>-¥{{orderInfo.coupon_deduction_money||'0.00'}}</view>
					<view class="order-item" v-if="orderInfo.payment_method==3||orderInfo.payment_method==4"><text
							class="item-title">团单金额:</text>¥{{orderInfo.reality_price}}</view>
					<view class="order-item" v-else><text class="item-title">实付金额:</text>¥{{orderInfo.actual_payment}}
					</view>
					<view class="order-item">
						<text class="item-title">付款方式:</text>
						<block v-if="orderInfo.payment_method==1">微信支付</block>
						<block v-if="orderInfo.payment_method==2">充值抵扣</block>
						<block v-if="orderInfo.payment_method==3">美团验劵</block>
						<block v-if="orderInfo.payment_method==4">抖音验券</block>
						<block v-if="orderInfo.payment_method==6">通卡支付</block>
					</view>
					<view class="order-item">
						<text class="item-title">支付时间:</text>{{orderInfo.payment_time}}
					</view>
					<view class="order-item">
						<text class="item-title">订单状态:</text>
						<block v-if="orderInfo.order_status==0">待使用</block>
						<block v-if="orderInfo.order_status==10">使用中</block>
						<block v-if="orderInfo.order_status==20">已结束</block>
						<block v-if="orderInfo.order_status==30">已取消</block>
						<block v-if="orderInfo.order_status==40">已超时</block>
					</view>
					<view class="order-item">
						<text class="item-title">开始时间:</text> {{orderInfo.service_start_time}}
					</view>
					<view class="order-item">
						<text class="item-title">结束时间:</text> {{orderInfo.service_end_time}}
					</view>
					<block v-if="orderInfo.refund_status==1&&orderInfo.refund_money">
						<view class="order-item">
							<text class="item-title">退款金额:</text> {{orderInfo.refund_money||0}}
						</view>
						<view class="order-item">
							<text class="item-title">退款时间:</text> {{orderInfo.refund_time||'无'}}
						</view>
					</block>
				</view>
				<view class="task-tips" v-if="taskList.length">
					您已出发挑战任务,完成以下任务可获取奖励,详情店铺首页点击“任务挑战”查看
				</view>
				<view class="task-box">
					<view class="task-item flexWrapNo" v-for="(item,index) in taskList" :key="index">
						<view class="task-cont">
							<view class="task-top flexWrap">
								<view class="task-title">{{item.task_name}}</view>
								<view class="btn flexWrapNo">
									<block v-if="item.task_type==1">{{item.time_len}}/{{item.task_target}}</block>
									<block v-else>当前排名:{{item.ranking}}</block>
									<image src="../static/home/righttop.png" class="righttop-icon"></image>
								</view>
								<!-- <view class="btn notstarted flexWrapNo">
									去参与
									<image src="../static/home/righttop.png" class="righttop-icon"></image>
								</view>
								<view class="btn completed flexWrapNo">
									<image src="../static/home/completed-icon.png" class="completed-icon"></image>
									已完成
								</view> -->
							</view>
							<view class="coupon-box flexWrapNo">
								<view class="coupon-item">5元优惠券x1</view>
							</view>
							<view class="task-text">{{item.task_desc}} <text
									v-if="item.task_type==2">(统计截止:{{item.end_date}})</text> </view>
						</view>
					</view>
				</view>
				<!-- <view class="ad-box">
					<image src="../static/ad.png"></image>
				</view> -->
				<!-- 开关灯按钮 -->
				<view class="tips-box1 flexWarpCenterColumn" v-if="openFlag">
					<view class="tips-name" v-if="showIndex==0">是否确认开灯？</view>
					<view class="tips-name" v-else>未到结束时间，是否继续关灯？</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeOpen()">取消</view>
						<view class="tips-btn noStarted" @tap="openLamp()" v-if="showIndex==0">确定开灯</view>
						<view class="tips-btn noStarted" @tap="opreaAction()" v-else>确定结束</view>
					</view>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="tipsFlage" :class="{cancel_box:iscancle==1}">
					<view class="tips-name" v-if="orderInfo.order_status==0">{{iscancle==1?'订单已取消':'确认取消订单？'}}</view>
					<view class="tips-name" v-else>{{iscancle==1?'订单已结束':'确认结束订单？'}}</view>
					<view class="tips-text" v-if="iscancle==0">
						<view v-if="orderInfo.order_status==0">
							<block v-if="orderInfo.payment_method==3||orderInfo.payment_method==4">
								本日还允许取消{{cancel_num}}次，取消预约开台后，此团购券可继续在本平台验券消费
							</block>
							<block v-else>
								{{cancelMsg}}
							</block>
						</view>
						<block v-else>
							<!-- <view>不退还已使用的优惠券/团购券/套餐</view> -->
							<view class="" v-if="orderInfo.order_type=='other_packages'">套餐不退款，不支持多次消费，取消后无法使用，是否取消?
							</view>
							<view v-else>结束订单系统仅退还实付金额</view>
						</block>
					</view>
					<view class="tips-text" v-else>
						<view>退款由原路退还</view>
					</view>
					<view class="btn-box flexWrap" v-if="iscancle==0">
						<block v-if="orderInfo.order_status==0">
							<view v-if="cancel_num==0" class="tips-btn noStarted" @tap="closeTips()">关闭</view>
							<block v-else>
								<view class="tips-btn" @tap="closeTips()">不取消</view>
								<view class="tips-btn noStarted" @tap="opreaAction()">
									确认取消
								</view>
							</block>
						</block>
						<block v-else>
							<view class="tips-btn" @tap="closeTips()">不结束</view>
							<view class="tips-btn noStarted" @tap="opreaAction()">
								确认结束
							</view>
						</block>
					</view>
					<view class="btn-box flexWrap" v-else>
						<view class="tips-btn" @tap="closeTips()">知道了</view>
					</view>
				</view>
				<view class="tips-box2 flexWarpCenterColumn" v-if="openShow">
					<view class="tips-name">提示</view>
					<image src="../../static/login/close.png" class="close-btn" @tap="closeOpenShow()"></image>
					<block v-if="isChanged&&openNum==3">
						<view class="tips-text">
							开灯失败，请联系店长
						</view>
					</block>
					<block v-else>
						<block v-if="reNum==2">
							<view class="tips-text">
								此桌台设备异常，请换桌重试！
							</view>
						</block>
						<block v-else>
							<view class="tips-text">
								开灯失败，“换桌”试一下吧！
							</view>
						</block>
					</block>
					<view class="tips-btn-box flexWrap">
						<block  v-if="isChanged&&openNum==3">
							<view class="tips-btn" @tap="makePhoneCall()">联系店长</view>
						</block>
						<block v-else>
							<view class="tips-btn" @tap="reDo()" v-if="reNum!=2">重试</view>
							<view class="tips-btn" @tap="showActionSheet()">换桌</view>
						</block>
					</view>
				</view>
				<view class="mask-wrap" v-if="tipsFlage||openFlag||openShow"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc: 0,
				taskList: [],
				status: 1,
				order_id: "",
				tipsFlage: false,
				orderInfo: {
					actual_payment: "0.00",
					coupon_deduction_money: "00.00",
					coupon_title: "加载中...",
					createtime: "加载中...",
					order_no: "加载中...",
					order_status: 10,
					order_type: "immediately",
					payment_method: 2,
					payment_status: 1,
					payment_time: "加载中...",
					platform_commission: "0.00",
					quantity: 0,
					minute: 0,
					recharge_consumption: "00.00",
					refund_money: "加载中...",
					refund_time: "加载中...",
					service_end_time: "加载中...",
					service_start_time: "加载中...",
					shop_name: "加载中...",
					store_equipment_name: "加载中...",
					total_pay_money: "加载中...",
					updatetime: "加载中...",
				},
				iscancle: 0,
				cancleText: "取消订单",
				showIndex: 0,
				openFlag: false,
				paymentConfig: {},
				timestamp: "",
				cancelMsg: "",
				cancel_num: 0,
				order_no: "",
				openNum: 0,
				reNum: 0,
				openShow: false,
				changeList: [],
				changeLists: [],
				order_equipment_id: "",
				equipment_id: "",
				serviceMinNum: 0,
				isChanged: false,
				currmentIndex: -1,
				playStatusList: [],
				numText:"",
				characters:""
			}
		},
		onLoad(ops) {
			this.timestamp = Date.parse(new Date()) / 1000;
			this.order_no = ops.order_no
			this.paymentConfig = uni.getStorageSync('paymentConfig')
			this.orderDetails();
			this.cancelTips();
			this.getData();
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onShareAppMessage: function(e) {
			let that = this
			return {
				title: "开门",
				path: `/pages/home/openDoor?store_id=${uni.getStorageSync('store_id')}&token=${uni.getStorageSync('token')}`,
				imageUrl: "",
				success: (res) => {
					uni.showToast({
						title: '分享成功',
						icon: 'success',
						duration: 1500
					})
				}
			}
		},
		methods: {
			// 点击状态
			changeStatus(index) {
				this.$jiuaiDebounce.canDoFunction({
					key: 'changeStatus', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 1000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.currmentIndex = index
						uni.setStorageSync('statusIndex', index)
						let play_status = this.playStatusList[index].status
						this.updatePlayStatus(play_status)
					}
				})
			},
			updatePlayStatus(play_status) {
				this.$request.post(this.$api.updatePlayStatus, {
					store_id: uni.getStorageSync('store_id'),
					order_no: this.order_no,
					play_status: play_status
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
					}
				})
			},
			getData() {
				let self = this
				this.$request.post(this.$api.taskList, {
					page: 1,
					num: 10,
					status: 1,
					store_id: uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						let newArray = data.data
						if (newArray.length != 0) {
							for (let i in newArray) {
								if (newArray[i].task_type == 1) {
									newArray[i].progress = Number(newArray[i].time_len) / newArray[i].task_target *
										100 + '%'
								} else {
									newArray[i].progress = Number(newArray[i].ranking) / newArray[i].join_num *
										100 + '%'
								}
							}
						}
						self.taskList = newArray;
					}
				})
			},
			getPlayStatusList() {
				this.$request.post(this.$api.playStatusList, {
					store_id: uni.getStorageSync('store_id'),
					order_no: this.order_no
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.playStatusList = data
						uni.getImageInfo({
							src: data[3].img,
							success: function(image) {
								console.log(image)
								console.log(data[3].img);
							}
						});
						if (uni.getStorageSync('statusIndex')) {
							this.currmentIndex = uni.getStorageSync('statusIndex')
						}
					}
				})
			},
			// 拨打电话
			makePhoneCall() {
				let that = this
				if (!uni.getStorageSync('customerServiceMobile')) {
					this.$tools.showToast('暂无客服电话')
					return;
				}
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('customerServiceMobile')
				})
			},
			goRenew() {
				uni.navigateTo({
					url: "/moduleA/beforConfirm?equipment_id=" + this.orderInfo.store_equipment_id +
						'&renew_order_id=' + this.orderInfo.id+'&order_type=immediately'
				})
			},
			opreaAction() {
				if (this.orderInfo.payment_method == 3 || this.orderInfo.payment_method == 4) {
					this.closeLamp();
					return;
				}
				if (this.orderInfo.order_type == 'other_packages' && this.orderInfo.order_status != 0) { //套餐
					this.closeLamp();
				} else {
					this.cancelOrder();
				}
			},
			showTips() {
				this.tipsFlage = true
			},
			closeTips() {
				this.tipsFlage = false
			},
			showOpen(index) {
				this.openFlag = true
				this.showIndex = index
			},
			closeOpen() {
				this.openFlag = false
			},
			// 获取订单详情
			orderDetails() {
				this.$request.post(this.$api.orderDetails, {
					order_no: this.order_no
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.orderInfo = data
						this.numText=""
						this.characters=""
						let nameList=this.orderInfo.store_equipment_name.split('')
						let isNaNEmpty = false //是否有数字
						isNaNEmpty =nameList.some(item =>!isNaN(item))
						if(!isNaNEmpty||isNaN(nameList[0])){
							for(let i in nameList){
								if(i==0){
									this.numText+=nameList[i]
								}else{
									this.characters+=nameList[i]
								}
							}
						}else{
							for(let i in nameList){
								if(!isNaN(nameList[i])){
									this.numText+=nameList[i]
								}else{
									this.characters+=nameList[i]
								}
							}
						}
						if (this.orderInfo.order_status == 10) {
							this.orderInfo.isShow = 1
							this.getPlayStatusList();
						} else if (this.orderInfo.order_status == 20) {
							if (this.timestamp - this.orderInfo.service_end_time > 1800) {
								this.orderInfo.isShow = 0
							} else {
								this.orderInfo.isShow = 1
							}
						} else if (this.orderInfo.order_status == 0) {

							if (this.timestamp - this.orderInfo.service_start_time > -1800) {
								this.orderInfo.isShow = 1
							} else {
								this.orderInfo.isShow = 0
							}
						}
						this.orderInfo.createtime = this.$tools.formatDate(this.orderInfo.createtime)
						this.orderInfo.service_start_time = this.$tools.formatDate(this.orderInfo
							.service_start_time)
						this.orderInfo.service_end_time = this.$tools.formatDate(this.orderInfo.service_end_time)
						this.orderInfo.payment_time = this.$tools.formatDate(this.orderInfo.payment_time)
						this.orderInfo.refund_time = this.$tools.formatDate(this.orderInfo.refund_time)
						this.orderInfo.service_date = this.orderInfo.service_start_time.split(' ')[0]
						this.orderInfo.start_time = this.orderInfo.service_start_time.split(' ')[1]
						this.orderInfo.end_time = this.orderInfo.service_end_time.split(' ')[1]
						this.order_id = this.orderInfo.id
						this.order_equipment_id = this.orderInfo.store_equipment_id
						if (this.orderInfo.quantity) {
							this.serviceMinNum = this.orderInfo.quantity * 60
						} else {
							this.serviceMinNum = this.orderInfo.minute
						}
					}
				})
			},
			// 重试
			reDo() {
				this.reNum++
				console.log(this.reNum)
				this.openLamp();
			},
			closeOpenShow() {
				this.openShow = false
				if (this.reNum == 2) {
					this.reNum = 0
				}
			},
			getChangeList() {
				this.$request.post(this.$api.changeList, {
					store_id: uni.getStorageSync('store_id'),
					minute: this.serviceMinNum,
					equipment_id: this.order_equipment_id,
					order_id: this.order_id
				}, {
					token: true
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.changeList = data
						for (let i in this.changeList) {
							this.changeLists.push(this.changeList[i].equipment_name)
						}
					}
				})
			},
			showActionSheet() {
				let that = this
				console.log(this.changeLists)
				if (this.changeLists.length == 0) {
					this.$tools.showToast('当前没有空余台桌');
					this.openShow = false
					return;
				}
				uni.showActionSheet({
					itemList: that.changeLists,
					success: function(res) {
						let index = res.tapIndex
						console.log(index)
						that.equipment_id = that.changeList[index].id
						that.openShow = false
						that.changeOrder();
						console.log('选中了第' + (index + 1) + '个按钮');
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			changeOrder() {
				this.$jiuaiDebounce.canDoFunction({
					key: 'changeOrder', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						this.$request.post(this.$api.changeOrder, {
							store_id: uni.getStorageSync('store_id'),
							equipment_id: this.equipment_id,
							order_id: this.order_id
						}, {
							token: true
						}).then(res => {
							console.log(res)
							if (res.code == 1) {
								this.$tools.showToast('换桌成功')
								this.isChanged = true
								this.openNum = 0
								setTimeout(() => {
									this.orderDetails()
								}, 500)
							}
						}).finally(() => {
							this.$tools.hideLoading()
						})
					}
				})
			},
			// 开灯
			openLamp() {
				this.$jiuaiDebounce.canDoFunction({
					key: 'openLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						this.$request.post(this.$api.openLamp, {
							order_no: this.order_no
						}, {
							token: true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code == 1) {
								if (data == 0) {
									this.openNum++
									console.log(this.openNum)
									if (this.openNum == 3) {
										this.closeOpen()
										this.openShow = true
										this.getChangeList();
									}
								} else {
									this.$tools.showToast('开灯成功')
									this.closeOpen()
									this.orderDetails()
								}
							}
						}).finally(() => {
							this.$tools.hideLoading()
						})
					}
				})
			},
			// 关灯
			closeLamp() {
				this.$jiuaiDebounce.canDoFunction({
					key: 'closeLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.closeLamp, {
							order_no: this.order_no
						}, {
							token: true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code == 1) {
								this.$tools.showToast('操作成功')
								this.closeOpen()
								this.closeTips()
								this.orderDetails()
							}
						})
					}
				})
			},
			cancelTips() {
				this.$jiuaiDebounce.canDoFunction({
					key: 'cancelOrder', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.cancelTips, {
							order_no: this.order_no
						}, {
							token: true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code == 1) {
								let cycle = ""
								this.cancel_num = data.cancel_num
								if (data.cancel_num_type == 1) {
									cycle = "本日"
								} else if (data.cancel_num_type == 2) {
									cycle = "本周"
								} else {
									cycle = "本月"
								}
								if (data.cancel_num == 0) {
									this.cancelMsg = cycle + '取消次数已达' + data.cancel_num_ded + '次,不允许取消'
								} else {
									this.cancelMsg = cycle + '还允许取消' + data.cancel_num +
										'次,取消订单将扣除总金额的' + data.cancel_rate + '%是否取消?'
								}
								console.log(this.cancelMsg)
							}
						})
					}
				})
			},
			// 取消订单
			cancelOrder() {
				this.$jiuaiDebounce.canDoFunction({
					key: 'cancelOrder', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.cancelOrder, {
							order_no: this.order_no
						}, {
							token: true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code == 1) {
								this.$tools.showToast('取消成功')
								this.iscancle = 1
								if (!this.tipsFlage) {
									this.closeOpen()
									this.tipsFlage = true
								}
								// this.closeOpen()
								// this.closeTips()
								this.orderDetails()
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 28upx;
	}

	.top-box {
		background: #232428;
		border-radius: 8upx;
		padding: 20upx 32upx 32upx;

		.table-info {
			.big {
				font-family: Arial, Arial;
				font-weight: bold;
				font-size: 136rpx;
				color: #F9FAFE;
			}

			.info {
				margin-left: 20upx;

				.table-name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 34rpx;
					color: #F9FAFE;
					.order-status {
						width: 118upx;
						height: 48upx;
						background: linear-gradient(180deg, #4AA22A 0%, #69D037 100%);
						border-radius: 48upx;
						font-size: 24upx !important;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 48upx;
						color: #FFFFFF;
						text-align: center;
						margin-right: 12upx;
						display: inline-block;
					}
					.residue{
						min-width: 234rpx;
						height: 48rpx;
						background: #464F58;
						border-radius: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						line-height: 48upx;
						font-size: 26rpx !important;
						color: #A3A7AC;
						margin-left: 10upx;
						padding-right: 20upx;
					}
					.noStartedstatus{
						background: #7781FD;
					}
					.noStarted {
						background: linear-gradient( 180deg, #4AA22A 0%, #69D037 100%);
						border: none !important;
					}
					
					.end {
						background: #848C95;
					}
				}

				.store-name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-top: 20upx;
					opacity: .6;

					.navigation-icon {
						width: 26upx;
						height: 34upx;
						margin-right: 10upx;
					}
				}
			}
		}

		.order-info {
			.order-type {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #FFFFFF;
				margin-bottom: 12upx;
			}

			.order-item {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #787A7D;
				margin-bottom: 12upx;
			}
		}

		.btn-box {
			margin-top: 30upx;

			.btn {
				width: 200rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				border-radius: 48rpx;
				border: 2rpx solid #FFFFFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-right: 20upx;

				&:nth-last-of-type(1) {
					margin-right: 0;
				}
			}

			.green {
				background: linear-gradient(90deg, #4AA22A 0%, #69D037 100%);
				border-color: #4AA22A;
			}
		}

		.score {
			height: 96rpx;
			line-height: 96upx;
			text-align: center;
			border-radius: 48rpx;
			border: 2rpx dashed rgba(255, 255, 255, .2);
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 36upx;
		}
	}

	.order-box {
		background: #232428;
		border-radius: 20rpx;
		padding: 40upx 32upx;
		margin-top: 14upx;

		.order-item {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			margin-bottom: 12upx;

			.item-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #787A7D;
				margin-right: 15upx;
				min-width: 150upx;
				display: inline-block;
			}
		}
	}

	.status-box {
		background: #232428;
		border-radius: 20rpx;
		margin-top: 14upx;
		padding: 32upx 12upx;

		.status-top {
			padding-left: 20upx;

			.status-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 34rpx;
				color: #FFFFFF;
			}

			.tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #919294;
				margin-top: 12upx;
			}
		}

		.status-cont {
			margin-top: 48upx;
			flex-wrap: wrap;

			.status-item {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #919294;
				margin-right: 18upx;
				margin-bottom: 16upx;

				&:nth-of-type(5n) {
					margin-right: 0;
				}

				.status-icon {
					width: 114upx;
					height: 114upx;
					border: 1rpx solid #919294;
					border-radius: 50%;
					position: relative;
					margin-bottom: 15upx;

					image {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;

						&:nth-of-type(1) {
							width: 56upx;
							height: 60upx;
						}
					}
				}

				.active {
					background-color: #464F58;
					border: 1rpx solid #464F58;
				}
			}
		}
	}

	.task-tips {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #848688;
		margin-top: 36upx;
	}

	.task-box {
		.task-item {
			margin-top: 16upx;
			align-items: start;
			background: #232428;
			border-radius: 20upx;
			padding: 24upx 28upx;
			min-height: 224upx;

			.task-icon {
				width: 116upx;
				height: 116upx;
				flex: none;
			}

			.task-cont {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 36rpx;
				margin-left: 24rpx;
				padding-top: 14rpx;
				flex: 1;

				.task-top {
					.task-title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 34rpx;
						color: #FFFFFF;
						line-height: 36rpx;
					}

					.btn {
						width: 192rpx;
						height: 96rpx;
						border-radius: 80rpx;
						justify-content: center;
						border: 4rpx solid #FFFFFF;

						.righttop-icon {
							width: 20upx;
							height: 20upx;
							margin-left: 10upx;
						}

						.completed-icon {
							width: 30upx;
							height: 20upx;
							margin-right: 10upx;
						}
					}

					.notstarted {
						background: linear-gradient(90deg, #4AA22A 0%, #69D037 100%);
						border: none;

					}

					.completed {
						background: #F0F3FA;
						color: #070900;
						border: none;
					}
				}

				.coupon-box {
					margin-top: 10upx;

					.coupon-item {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #FF8A57;
						height: 60rpx;
						line-height: 60rpx;
						padding: 0 12upx;
						flex: none;
						background: rgba(255, 138, 87, .2);
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						margin-right: 10upx;
					}
				}

				.task-text {
					margin-top: 12upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}
		}
	}

	.ad-box {
		height: 192upx;
		margin-top: 12upx;
	}

	.tips-box {
		width: 660upx;
		height: 466upx;
		background: #232428;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;

		.tips-name {
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #FFFFFF;
			margin-top: 68upx;
		}

		.tips-text {
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 50upx;
			color: #FFFFFF;
			margin-top: 34upx;
			padding: 0 30upx;
		}

		.btn-box {
			margin-top: 60upx;

			.tips-btn {
				width: 240upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #4AA22A;
				border-radius: 16upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.noStarted {
				background: linear-gradient(90deg, #4AA22A 0%, #69D037 100%);
				margin-left: 28upx;
			}
		}
	}

	.tips-box1 {
		width: 660upx;
		height: 390upx;
		background: #232428;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;

		.tips-name {
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #FFFFFF;
			margin: 90upx 0;
		}

		.btn-box {
			margin-top: 10upx;

			.tips-btn {
				width: 240upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #4AA22A;
				border-radius: 16upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.noStarted {
				background: linear-gradient(90deg, #4AA22A 0%, #69D037 100%);
				margin-left: 28upx;
			}
		}
	}
	.tips-box2 {
		width: 630upx;
		height: 440upx;
		background: #232428;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
	
		.tips-name {
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #FFFFFF;
			margin-top: 68upx;
		}
	
		.close-btn {
			width: 40upx;
			height: 40upx;
			position: absolute;
			top: 30upx;
			right: 30upx;
		}
	
		.tips-text {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 50upx;
			color: #FFFFFF;
			margin-top: 14upx;
			padding: 0 30upx;
		}
	
		.tips-btn-box {
			margin-top: 60upx;
	
			.tips-btn {
				width: 200upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				background: linear-gradient(90deg, #4AA22A 0%, #69D037 100%);
				border-radius: 16upx;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
	
				&:nth-of-type(1) {
					margin-right: 30upx;
				}
			}
		}
	}
</style>